.container {
/* .container111 { */
 
    display: grid;
    grid-gap: 4px;    
    /* justify-content: stretch; */
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows: 120px 120px 240px 120px 120px;  */
    grid-template-rows:  minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 6fr)
           minmax(120px, 1fr) minmax(120px, 1fr);

    grid-template-areas:
      "h h h h h h h h h h h h"
      "h h h h h h h h h h h h"
      /* "c c c c c c c c c m m m" */
      "c c c c c c c c c c c c"
      "f f f f f f f f f f f f"
      "f f f f f f f f f f f f";
}

/* 
@media screen and (max-width: 640px) {
  .container {
      grid-template-areas:
          "m m m m m m h h h h h h"
          "c c c c c c c c c c c c"
          "f f f f f f f f f f f f";
  }
} */


.header {
    grid-area: h;
      border: 2px ;
    border-radius: 20px;
}
.menu {
    grid-area: m;      border: 2px ;
    border-radius: 20px;
}
.content {
    grid-area: c;      border: 2px ;
    border-radius: 20px;
    
}
.footer {
   grid-area: f;      border: 2px ;
    border-radius: 20px;
}

/* ---------for d3 chart---------------- */
 .line {
    fill: none;
    stroke: dodgerblue;
    stroke-width: 2px;
    stroke-linecap: round;
    
  } 
  
  /* .line {
    stroke: #FF3757;
    stroke-width: 1.5px;
    fill: none;
  }
  
  .lineDots {
    fill: #FF3757;
    stroke: #FF3757;
    stroke-width: 6px;
    stroke-opacity: 0.2;
  } */
#headertitle,#footertitle
{
  margin: 2px;
}

  .titletext{
    fill: steelblue;
    font-size: 14px;
  }
  .axisSteelBlue text{
    fill: steelblue;
    font-size: 9px;
  }

  .axisRed text{
    fill: red;
    font-size: 9px;
  }
    
  .axisPurple text {
    fill: purple;
    font-size: 9px;
  }

  .axisBottom path, line {
    stroke: steelblue  ;
    shape-rendering: crispEdges;
    stroke-opacity: 0.4;
    stroke-width: 1px;
}
 .axisSteelBlue path,line{
  stroke: steelblue  ;
  shape-rendering: crispEdges;
}
 .axisPurple path,line{
  /* stroke: purple  ; */
  stroke: lightblue  ;
  shape-rendering: crispEdges;
}

  .axisBottom text {    
    font-size: 9px;
    font-family: sans-serif;
    fill: steelblue;
}

.area {
  stroke: #FF3757;
  stroke-width: 1.5px;
  stroke-opacity: 0.2;
  fill: none;
} 

  /* .axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
} */

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 16px;
  /* width: 100%; */
  width: 100px;
  line-height: 1;
  color: rgba(233, 15, 15, 1);  
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}